import { Modal} from 'antd';
import React, { useState, useRef } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import ProTable, { ProColumns, ActionType } from '@ant-design/pro-table';
import { DetialTableListItem} from './data';
import publishDetialList from '../../funcs/publishdetiallist';


export interface DetialProps {
  onCancel: (flag?: boolean) => void;
  detailModalVisible: boolean;
  publishid:boolean;
}


const DetialForm: React.FC<DetialProps> = (props) => {
  const actionRef = useRef<ActionType>();
  const publishid = props.publishid;
  const columns: ProColumns<any>[] = [
    {
      title: "文件名称",
      dataIndex: 'file_name',
      valueType: 'textarea',
    },
    {
      title: "文件类型",
      dataIndex: 'file_type',
      hideInForm: true,
      valueEnum: {
        1: {
          text: "硬件资料",
          status: 'Processing',
        },
        2: {
          text: "工具软件",
          status: 'Success',
        },
        3: {
          text: "参数模版",
          status: 'Error',
        },
        4: {
          text: "嵌入式软件资料",
          status: 'Error',
        },
      },
    },
    {
      title: "硬件版本",
      dataIndex: 'hard_version',
      valueType: 'textarea',
    },
    {
      title: "产品名称",
      dataIndex: 'product_number',
      valueType: 'textarea',
    },
  ];
  return (
    <Modal
      width={1040}
      bodyStyle={{ padding: '32px 40px 48px' }}
      destroyOnClose
      title={"创建发布"}
      visible={props.detailModalVisible}
      onCancel={() => props.onCancel()}
    >
    <PageContainer>
      <ProTable<DetialTableListItem>
        headerTitle={"发布详情"}
        actionRef={actionRef}
        rowKey="key"
        search={false}
        request={(params, sorter, filter) => publishDetialList({ ...params, sorter, filter, publishid })}
        columns={columns}
      />
    </PageContainer>
    </Modal>
  )
}

export default DetialForm